<script lang="ts">
    import Checkbox from "../Checkbox/Checkbox.svelte";
    import Icon from "../Common/Icons/Icon.svelte";
    import Loading from "../Common/Loading/Loading.svelte";
    import type { CascaderStoreProps } from "./Cascader";
    import { useCascaderContext } from "./Cascader.svelte";
    import type { CascaderStore } from "./store.svelte";

    const props = $props();
    const ctx: any = useCascaderContext();
    const store: CascaderStoreProps = props.store;
    const cascaderStore: CascaderStore = ctx.getCascaderStore();
    const valueField = cascaderStore.valueField || "value";
    const titleField = cascaderStore.titleField || "title";
    const selected = $derived(cascaderStore.selectedKey.includes(props.data[valueField]));
    const classList = $derived({
        "cm-cascader-item": true,
        "cm-cascader-item-active": selected,
        "cm-cascader-item-disabled": props.data.disabled,
    });
    let loading = $state(false);
    let checked = $state(store.nodeMap[props.data[valueField]]?.checked);
    const onClick = async () => {
        if (props.data.disabled) {
            return;
        }
        if (props.data.loading && ctx && ctx.loadData) {
            try {
                loading = true;
                await cascaderStore.loadData(props.data, ctx.loadData);
            } catch (e) {
                // todo
            } finally {
                loading = false;
            }
        }
        if (props.trigger === "click") {
            cascaderStore.selectItem(props.data[valueField]);
        }
        ctx && ctx.onSelect(props.data);
    };

    let timer: any = null;
    const onMouseEnter = () => {
        if (props.data.disabled) {
            return;
        }
        timer && clearTimeout(timer);
        timer = setTimeout(() => {
            !selected && cascaderStore.selectItem(props.data[valueField]);
        }, 100);
    };

    const onCheckChange = (checkFlag: boolean) => {
        cascaderStore.checkNode(props.data[valueField], checkFlag);
        checked = store.nodeMap[props.data[valueField]]?.checked;
    };

    $effect(() => {
        checked = store.nodeMap[props.data[valueField]]?.checked;
    });
</script>

<!-- svelte-ignore a11y_click_events_have_key_events -->
{#if props.data}
    <!-- svelte-ignore a11y_no_static_element_interactions -->
    <div class={classList} onclick={onClick} onmouseenter={props.trigger === "hover" ? onMouseEnter : undefined}>
        {@render props.data.icon?.()}
        {#if ctx.multi && props.data.checkable !== false}
            <Checkbox disabled={props.data.disabled} bind:checked onchange={onCheckChange} />
        {/if}
        <span class="cm-cascader-text">{props.data[titleField]}</span>
        {#if props.data?.children?.length || props.data?.loading}
            {#if loading}
                <Loading color="#1890ff" />
            {:else}
                <Icon icon="chevronRight" class="cm-menu-submenu-cert" />
            {/if}
        {/if}
    </div>
{/if}
